<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>趋势分析</title>
    <link href="css/common.css" rel="stylesheet">
    <link href="css/ec.css" rel="stylesheet">
    <link href="css/list.css" rel="stylesheet">
    <link href="css/newInf.css" rel="stylesheet">
    <script src="../plugin/echarts/dist/echarts-all.js"></script>
    <script src="../plugin/date/WdatePicker.js"></script>
    <!--<script src="../plugin/validator/jquery.validate.min.js"></script>-->
</head>
<body>
<div class="dataReport warp">
    <div class="dataWarp">
        <div class="dataWarpUp center-y">
            <div class="dataWarpUpDate center-y">
                <div class="day hover">今天<input class="today" hidden type="text"></div>
                <div class="day">昨天<input class="yesterday" hidden type="text"></div>
                <div class="day">最近7天<input class="week" hidden type="text"></div>
                <div class="startEnd center-y">
                    <div class="startName">起始日期：</div>
                    <div class="startDate"><input class="dateW" id="d4321" type="text" readonly onclick="WdatePicker({maxDate:'%y-%M-%d'})" /></div>
                    <div class="endName">结束日期：</div>
                    <div class="endDate"><input class="dateW" id="d4322" type="text" readonly onclick="WdatePicker({minDate:'#F{$dp.$D(\'d4321\',{d:-0});}',maxDate:'%y-%M-%d'})"  /></div>
                </div>
            </div>
            <div class="contrast"><a href="javascript:;">搜索</a></div>
        </div>
        <div class="dataWarpTarget">
            <table class="targetTable">
                <tr>
                    <th><div class="targetTableName">浏览次数(PV)</div></th>
                    <th><div class="targetTableName">独立访客(UV)</div></th>
                    <th><div class="targetTableName">IP</div></th>
                    <th><div class="targetTableName">新独立访客</div></th>
                    <th><div class="targetTableName">访问次数</div></th>
                    <th><div class="targetTableName">人均浏览页数</div></th>
                    <th><div class="targetTableName">平均访问深度</div></th>
                </tr>
                <tr>
                    <td><div class="targetTableNum">338</div></td>
                    <td><div class="targetTableNum">112</div></td>
                    <td><div class="targetTableNum">121</div></td>
                    <td><div class="targetTableNum">58</div></td>
                    <td><div class="targetTableNum">183</div></td>
                    <td><div class="targetTableNum">3.02</div></td>
                    <td><div class="targetTableNum">1.85</div></td>
                </tr>
            </table>
        </div>
        <div class="dataCharts">
            <div class="dataChartTarget">
                <div class="targetData"><input class="targetDataIn" type="text" readonly value="选择指标" /></div>
                <div class="targetChoice">
                    <div class="choiceItem">
                        <label class="center-y">
                            <input class="choiceCheck" data-name="num" type="checkbox" />
                            <div class="choiceName">浏览次数(PV)</div>
                        </label>
                    </div>
                    <div class="choiceItem">
                        <label class="center-y">
                            <input class="choiceCheck" data-name="caller" type="checkbox" />
                            <div class="choiceName">独立访客(UV)</div>
                        </label>
                    </div>

                    <div class="choiceItem">
                        <label class="center-y">
                            <input class="choiceCheck" data-name="ip" type="checkbox" />
                            <div class="choiceName">IP</div>
                        </label>
                    </div>
                    <div class="choiceItem">
                        <label class="center-y">
                            <input class="choiceCheck" data-name="new" type="checkbox" />
                            <div class="choiceName">新独立访客</div>
                        </label>
                    </div>
                    <div class="choiceItem choiceBtn">
                        <div class="center-y">
                            <button class="choiceConfirm">确定</button>
                            <button class="choiceCancel">取消</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="dataChart" class="dataChart"></div>
        </div>
        <div class="dataInfo">
            <div class="dataInfoH">统计报表</div>
            <table class="dataTable">
                <tr class="th">
                    <th>时间段</th>
                    <th>浏览次数(PV)</th>
                    <th>独立访客(UV)</th>
                    <th>IP</th>
                    <th>新独立访客</th>
                    <th>访问次数</th>
                    <th>人均浏览页数</th>
                    <th>平均访问深度</th>
                </tr>
                <tr class="count">
                    <td>全站总计</td>
                    <td>00:00-00:59</td>
                    <td>167</td>
                    <td>170</td>
                    <td>99</td>
                    <td>285</td>
                    <td>3.14</td>
                    <td>1.84</td>
                </tr>
                <tr>
                    <td>00:00-00:59</td>
                    <td>52</td>
                    <td>21</td>
                    <td>56</td>
                    <td>18</td>
                    <td>12</td>
                    <td>1.1</td>
                    <td>1.2</td>
                </tr>
                <tr>
                    <td>00:00-00:59</td>
                    <td>52</td>
                    <td>21</td>
                    <td>56</td>
                    <td>18</td>
                    <td>12</td>
                    <td>1.1</td>
                    <td>1.2</td>
                </tr>
                <tr>
                    <td>00:00-00:59</td>
                    <td>52</td>
                    <td>21</td>
                    <td>56</td>
                    <td>18</td>
                    <td>12</td>
                    <td>1.1</td>
                    <td>1.2</td>
                </tr>
                <tr>
                    <td>00:00-00:59</td>
                    <td>52</td>
                    <td>21</td>
                    <td>56</td>
                    <td>18</td>
                    <td>12</td>
                    <td>1.1</td>
                    <td>1.2</td>
                </tr>

            </table>
        </div>
    </div>
</div>

</body>
<script src="js/jquery-1.4.2.min.js"></script>
 <!--为ECharts准备一个具备大小（宽高）的Dom -->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('dataChart'));

    // 指定图表的配置项和数据
    option = {
        title: {
            text: '折线图堆叠'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['新独立访客','IP','访问次数','人均浏览页数','平均访问深度']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'新独立访客',
                type:'line',
                stack: '总量',
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'IP',
                type:'line',
                stack: '总量',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'访问次数',
                type:'line',
                stack: '总量',
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'人均浏览页数',
                type:'line',
                stack: '总量',
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'平均访问深度',
                type:'line',
                stack: '总量',
                data:[820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

//    日期切换
    $('.day').each(function () {
        $(this).click(function () {
            $(this).addClass('hover');
            $(this).siblings('.day').removeClass('hover');
        })
    });
//    选择指标
    var target = ['num','ip'];      // 默认指标
    $('.dataChartTarget').hover(function () {
    //    鼠标悬浮
        $('.choiceItem').each(function () {
            var name = $(this).find('input[type=checkbox]').attr('data-name');
            $(this).find('input[type=checkbox]').removeAttr('checked');
            for(var i=0;i<target.length;i++){
                if (target[i]==name){
                    $(this).find('input[type=checkbox]').attr('checked','checked');
                }
            }
            $('.targetChoice').show();
        })
    },function () {
    //    鼠标移出
        $(this).find('input[type=checkbox]').removeAttr('checked');
        $('.targetChoice').hide();
    });
//    点击确定添加指标
    $('.choiceConfirm').click(function () {
        $('.choiceItem input[type=checkbox]').each(function (index) {
            //添加删除指标
            if ($(this).attr('checked')) {
                var name = $(this).attr('data-name');
                target[index]=name;
            }else{
                target[index]='';
            }
        });
        $('.targetChoice').hide();
    });
//    点击取消
    $('.choiceCancel').click(function () {
        $('.targetChoice').hide();
    });
</script>
<!--<script>-->
    <!--$(function () {-->

        <!--//图标路径配置-->
        <!--configEchartPath();-->

        <!--/*加载第一个图表*/-->
        <!--require(-->
            <!--[-->
                <!--'echarts',-->
                <!--'echarts/chart/bar'-->
            <!--],-->
            <!--function (ec) {-->
                <!--var myChart = ec.init($("#dataChart")[0]);-->

                <!--//默认统计图配置-->
                <!--var option = {-->
                    <!--tooltip: {-->
                        <!--trigger: 'axis',-->
                        <!--formatter: "{b} : {c}T"-->
                    <!--},-->
                    <!--grid: {-->
                        <!--x: 50,-->
                        <!--y: 30,-->
                        <!--x2: 30,-->
                        <!--y2: 30-->
                    <!--},-->
                    <!--backgroundColor: "#fff",-->
                    <!--legend: {-->
                        <!--textStyle: {-->
                            <!--fontSize: 14,-->
                            <!--color: "#797979"-->
                        <!--},-->
                        <!--show: true,-->
                        <!--data: []-->
                    <!--},-->
                    <!--calculable: true,-->
                    <!--xAxis: [-->
                        <!--{-->
                            <!--type: 'category',-->
                            <!--data: []-->
                        <!--}-->
                    <!--],-->
                    <!--yAxis: [-->
                        <!--{-->
                            <!--type: 'value'-->
                        <!--}-->
                    <!--],-->
                    <!--series: []-->
                <!--};-->

                <!--//异步加载数据前的动画效果-->
                <!--myChart.showLoading({-->
                    <!--text: '正在努力的读取数据中...'-->
                <!--});-->

                <!--//异步加载数据-->
                <!--$.post('dayOilHistogram.jhtml', {}, function (data) {-->
                    <!--//解析JSON数据-->
                    <!--var data = $.parseJSON(data);-->
                    <!--if (data.success) {-->

                        <!--//获取解析数据-->
                        <!--var name = data.name;-->
                        <!--var xAxisData = data.xAxisData;-->
                        <!--var seriesData = data.seriesData;-->

                        <!--//为统计图设置数据-->
                        <!--option.legend.data.push(name);-->
                        <!--option.xAxis[0].data = xAxisData;-->
                        <!--option.series.push({name: name, type: 'bar',stack: 'sum', barCategoryGap: '65%', data: seriesData});-->
                        <!--myChart.setOption(option).setTheme("macarons");-->

                        <!--//加载数据后，取消动画-->
                        <!--myChart.hideLoading();-->
                    <!--}-->
                <!--});-->

            <!--}-->
        <!--)-->
    <!--})-->

    <!--/**-->
     <!--* 配置图表单文件引用路径-->
     <!--*/-->
    <!--function configEchartPath() {-->
        <!--//配置Echarts引用路径-->
        <!--require.config({-->
            <!--paths: {-->
                <!--echarts: '../plugin/echarts/dist'-->
            <!--}-->
        <!--});-->
    <!--}-->
<!--</script>-->


</html>